import { Button, Form, Input, Select, Switch, Cascader } from "antd";
import React, { Component } from "react";
import { articlePost } from "@/api/course";
import UploadImg from "@/components/upload-img";
import { courseGet } from "../../api/course";
import { categoryData } from "../../utils/tools";
import RichEditor from "../../components/rich-editor";

const { Option } = Select;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 12,
  },
};
class ArticlePub extends Component {
  formRef = React.createRef();
  state = {
    courseList: [],
  };
  componentDidMount = () => {
    courseGet().then((res) => {
      const { results } = res.data;
      let courseList = categoryData(results);
      this.setState({
        courseList,
      });
    });
  };
  onFinish = (values) => {
    const [lv1, lv2] = values.classify;
    values.lv1 = lv1;
    values.lv2 = lv2 ? lv2 : "";
    console.log(values);
    articlePost(values);
  };
  onReset = () => {
    this.formRef.current.resetFields();
  };
  render() {
    const { TextArea } = Input;
    const { courseList } = this.state;
    return (
      <div>
        <Form
          {...layout}
          ref={this.formRef}
          name="article-ref"
          onFinish={this.onFinish}
          initialValues={{
            name: "争渡·争渡·惊起一滩鸥鹭",
            vip: false,
            brief:
              "常记溪亭日暮，沉醉不知归路。 兴尽晚回舟，误入藕花深处。 争渡，争渡，惊起一滩鸥鹭。",
          }}
        >
          <Form.Item
            name="name"
            label="课程名称"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="img"
            label="课程封面"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <UploadImg></UploadImg>
          </Form.Item>
          <Form.Item
            name="classify"
            label="归属分类"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Cascader
              options={courseList}
              placeholder="选择归属"
              fieldNames={{ label: "name", value: "name" }}
            />
          </Form.Item>
          <Form.Item
            name="vip"
            label="会员课程"
            valuePropName="checked"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Switch />
          </Form.Item>
          <Form.Item
            name="brief"
            label="课程简介"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <TextArea rows={4} placeholder="课程简介..." maxLength={6} />
          </Form.Item>
          <Form.Item
            name="details"
            label="课程详情"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <RichEditor></RichEditor>
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button
              htmlType="button"
              onClick={this.onReset}
              style={{ marginLeft: "10px" }}
            >
              重置
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default ArticlePub;
